<template>
  <el-drawer
    v-model="showDetail"
    title="3D模型详细"
    @close="handleDetailClose"
    custom-class="drawer-class"
  >
    <!-- 图片 -->
    <div class="item">
      <div class="body">
        <el-row>
          <el-col @click="openModel(item)" class="image" v-for="item in modelIds" :key="item" :span="12">
            <el-image v-if="selectedModelId !== item" :src="detail.thumbnailUrl"/>
            <IFrame style="height: 246px; width: 100%;" v-else :src="threeSrc"/>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 时间 -->
    <div class="item">
      <div class="tip">时间</div>
      <div class="body">
        <div>提交时间：{{ formatTime(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
        <div>生成时间：{{ formatTime(detail.finishTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
      </div>
    </div>
    <!-- 模型 -->
    <div class="item">
      <div class="tip">模型</div>
      <div class="body"> {{ detail.model }} </div>
    </div>
    <!-- 提示词 -->
    <div v-if="detail.objectPrompt || detail.prompt" class="item">
      <div class="tip">提示词</div>
      <div class="body">
        {{ detail.objectPrompt || detail.prompt }}
      </div>
    </div>
    <!-- 地址 -->
    <div class="item">
      <div class="tip">模型地址</div>
      <div class="body">
        {{ detail.modelUrl }}
      </div>
    </div>
    <div v-if="textureList && textureList.length" class="item">
      <div class="tip">模型材质</div>
      <div class="body">
        <el-row>
          <el-col class="image" :span="12" v-for="(item) in textureList" :key="item.id">
            <el-image :src="item.url" />
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-if="detail.imageUrl" class="item">
      <div class="tip">模型垫图</div>
      <div class="body">
        <el-image :src="detail.imageUrl"/>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ThreedApi, ThreedVO, ThreedUrlApi, ThreedUrlVO } from '@/api/ai/threed'
import { formatTime } from '@/utils'
import defaultImg from '@/assets/ai/video.png'

const threeUrl = import.meta.env.VITE_3D_URL;
const threeSrc = ref(''); //模型浏览
const showDetail = ref<boolean>(false) // 是否显示
const detail = ref<ThreedVO>({} as ThreedVO) // 图片详细信息
const modelIds = ref<number[]>([]);
const selectedModelId = ref<number>(0)
const textureList = ref<ThreedUrlVO[]>([])

const props = defineProps({
  show: {
    type: Boolean,
    require: true,
    default: false
  },
  id: {
    type: Number,
    required: true
  }
})

/**
 * 显示模型
 */
const openModel = (modelId: number) =>{
  selectedModelId.value = modelId;
  threeSrc.value = threeUrl + "/view?id=" + modelId;
}

/** 关闭抽屉  */
const handleDetailClose = async () => {
  selectedModelId.value = 0;
  emits('handleDetailClose')
}

/** 监听 drawer 是否打开 */
const { show } = toRefs(props)
watch(show, async (newValue, oldValue) => {
  showDetail.value = newValue as boolean
})

/**  获取图片详情  */
const getThreedDetail = async (id: number) => {
  detail.value = await ThreedApi.getThreed(id)
  modelIds.value = detail.value.modelIds
}

/**  获取图片详情  */
const getThreedUrl = async (id: number) => {
  const response = await ThreedUrlApi.getThreedUrlPage({
    threedId: id,
    cate: 'texture_urls'
  })
  textureList.value = response.list;
}

/** 监听 id 变化，加载最新图片详情 */
const { id } = toRefs(props)
watch(id, async (newVal, oldVal) => {
  if (newVal) {
    await getThreedDetail(newVal)
    await getThreedUrl(newVal)
  }
})

const emits = defineEmits(['handleDetailClose'])
</script>
<style scoped lang="scss">
.image{
  padding: 5px;
}
.item {
  margin-bottom: 20px;
  width: 100%;
  overflow: hidden;
  word-wrap: break-word;

  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .tip {
    font-weight: bold;
    font-size: 16px;
  }

  .body {
    margin-top: 10px;
    color: #616161;

    .taskDetail {
      border-radius: 10px;
    }
  }
}
</style>
